{% include "../base/header.html" %}

<div id="app" v-loading="loading" element-loading-text="处理中...">
    <form class="search-form" action="" method="post">
        <el-input placeholder="请输入搜索内容" v-model="search.keywords" class="keywords">
            <el-button slot="append" icon="search" @click="get_project_list"></el-button>
        </el-input>
        <div class="submit m-t-15">
            <a href="{{ host }}project/saveinfo">
                <el-button type="info" size="small" icon="plus">新增</el-button>
            </a>
        </div>
    </form>

    <el-table :data="table_data" stripe border class="content-table m-t-15">
        <el-table-column prop="project_name" label="名称" width="150" fixed="left" sortable></el-table-column>
        <el-table-column prop="git_ssh_address" label="git ssh地址" width="200"></el-table-column>
        <el-table-column prop="dir_address" label="项目路径位置" width="150"></el-table-column>
        <el-table-column prop="git_alias" label="git别名" width="150"></el-table-column>
        <el-table-column prop="is_cluster_text" label="集群模式" width="95"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="160" sortable></el-table-column>
        <el-table-column prop="describe" label="描述"></el-table-column>
        <el-table-column label="操作" width="110" fixed="right">
            <template scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button type="info" :plain="true" size="mini" icon="edit" @click="handle_edit(scope.row.project_id)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button type="danger" :plain="true" size="mini" icon="delete" @click="handle_delete(scope.$index, scope.row.project_id)"></el-button>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination @size-change="handle_size_change" @current-change="handle_current_change" :current-page="1" :page-sizes="{{ page.page_sizes }}" :page-size="page_size" layout="{{ page.page_layout }}" :total="{{ count }}" class="tr m-t-15 m-b-15"></el-pagination>
</div>

{% include "../base/footer.html" %}
<script type="text/javascript">
new Vue({
    el : '#app',
    data : {
        table_data: [],
        loading: false,
        search : {
            keywords : ''
        },
        page_size : {{ page.page_size }}
    },

    // 初始化
    created : function()
    {
        // 获取数据
        if({{ count }} > 0)
        {
            this.get_project_list();
        }
    },

    // 函数
    methods : {
        /**
         * [get_project_list 获取数据列表]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-06T07:14:36+0800
         * @param    {[int]}           [page]      [当前分页数]
         */
        get_project_list : function(page)
        {
            page = page || 1;
            this.loading = true;
            this.$http.post(__host__+'project/get_project_list', {csrfmiddlewaretoken:'{{ csrf_token }}', keywords:this.search.keywords, page:page, page_size:this.page_size}, {emulateJSON: true}).then((response) => 
            {
                if(response.data.code == 0)
                {
                    this.table_data = response.data.data;
                } else {
                    this.$message({
                        showClose: true,
                        message: response.data.msg,
                        type: 'warning'
                    });
                }
                this.loading = false;
            }, (response) =>
            {
                this.$message({
                    showClose: true,
                    message: error_msg,
                    type: 'error'
                });
                this.loading = false;
            });
        },

        /**
         * [handle_edit 处理编辑]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-06T17:12:12+0800
         * @param    {[int]}                 id [项目id]
         */
        handle_edit : function(id)
        {
            window.location.href=__host__+'project/saveinfo?id='+id;
        },

        /**
         * [handle_delete 数据删除]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-07T19:45:28+0800
         * @param    {[int]}           index      [列表索引]
         * @param    {[int]}           project_id [项目id]
         */
        handle_delete : function(index, project_id)
        {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true;
                this.$http.post(__host__+'project/project_delete', {csrfmiddlewaretoken:'{{ csrf_token }}', project_id:project_id}, {emulateJSON: true}).then((response) => 
                {
                    if(response.data.code == 0)
                    {
                        this.table_data.splice(index, 1);

                        this.$message({
                            showClose: true,
                            message: response.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: response.data.msg,
                            type: 'warning'
                        });
                    }
                    this.loading = false;
                }, (response) =>
                {
                    this.$message({
                        showClose: true,
                        message: error_msg,
                        type: 'error'
                    });
                    this.loading = false;
                });
            }).catch(() => {});
        },

        /**
         * [handle_size_change 分页条数操作]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-07T19:45:28+0800
         * @param    {[int]}           [page]      [当前分页数]
         */
        handle_size_change : function(page_size)
        {
            this.page_size = page_size;
            this.get_project_list(1);
        },

        /**
         * [handle_current_change 分页操作]
         * @author   Devil
         * @blog     http://gong.gg/
         * @version  0.0.1
         * @datetime 2017-08-07T19:45:28+0800
         * @param    {[int]}           [page]      [当前分页数]
         */
        handle_current_change : function(page)
        {
            this.get_project_list(page);
        }
    }
});
</script>